<template>
<div class="showMessage">
    <ul>
      <TestShowMessageItem 
        v-for="item of showMessageArray" 
        v-bind:key="item.id"
        v-bind:showMessageItem="item"
      >
      </TestShowMessageItem>
    </ul>
</div>
</template>
<script>
import TestShowMessageItem  from "./TestShowMessageItem";

export default {
  name: "TestShowMessage",
  components: {
    TestShowMessageItem
  },
  props: {
    showMessageArray: Array
  },
  methods: {}
};
</script>
<style  lang="scss" scoped>
@mixin widthAndColor($color: blue, $width: 200, $height: 200) {
  width: #{$width}px;
  height: #{$height}px;
  background-color: $color;
}
.showMessage {
  display: flex;
  justify-content: center;
  .showMessage-item {
    @include widthAndColor(red, 50, 50);
  }
}
</style>


